<template>
    <div>
        <!-- 审评员进来需要全局弹窗提示让审评员添加签名和银行卡号 -->
        <a-modal
            title="完善信息"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="handleCancel"
            :maskClosable="false"
            cancelText="关闭"
            class="verifyByYkhQzdmTx-modal-box"
        >
            <a-form-model
                class="form-model-big-box form-model-big-box1"
                ref="initiateRegistrationCompForm"
                layout="inline"
            >
                <a-form-model-item v-if="verifyByYkhQzdmTxData.yhkFlag" label="银行卡号" class="form-item-flex-1">
                    <a-input placeholder="请输入银行卡号" v-model:value="currentRow.fyhkh" style="margin-top: 8px;"/>
                </a-form-model-item>
                <a-form-model-item v-if="verifyByYkhQzdmTxData.fkfhFlag" label="开户行" class="form-item-flex-1">
                    <compSelector
                        style="margin-top: 4px;"
                        v-model="currentRow.fkfh"
                        :defaultValue="currentRow.fkfh"
                        compType="Select"
                        dictionaryType="四大银行"
                        :height="40"
                    />
                </a-form-model-item>
                <a-form-model-item v-if="verifyByYkhQzdmTxData.fkhhszdFlag" label="开户行所在地" class="form-item-flex-1">
                    <a-textarea
                        style="width: 100%;margin-top: 5px;"
                        v-model:value="currentRow.fkhhszd"
                        :autosize="{ minRows: 1, maxRows: 10000 }"
                        placeholder="请输入开户行所在地" 
                    />
                </a-form-model-item>
                <a-form-model-item v-if="verifyByYkhQzdmTxData.userSignFlag" label="个人签名" class="form-item-flex-1">
                <div style="border: 1px solid #d9d9d9;padding: 0 10px;margin-top: 3px;">
                    <div style="margin-right: 10px;" :key="signLinkKey">
                    <img style="width: 172px;" v-if="verifyByYkhQzdmTxData.signLink" :src="verifyByYkhQzdmTxData.signLink+'&aa='+Date.now()" mode="scaleToFill"/>
                    </div>
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                    <a-upload
                        style="width: auto;"
                        name="avatar"
                        :show-upload-list="false"
                        :before-upload="signBeforeUpload"
                        @change="signHandleChange"
                    >
                        <a-button> <a-icon type="upload" /> 上传 </a-button>
                    </a-upload>
                    <a-button class="blue-btn" type="primary" style="margin: 0 10px;" @click="onlineSignatureClick()">在线签名</a-button>
                    <a-button class="blue-btn" type="primary" @click="getSignPhotoLink()">刷新</a-button>
                    </div>
                </div>
                </a-form-model-item>
            </a-form-model>
            <onlineSignature ref="onlineSignatureRef" />
        </a-modal>
    </div>
</template>
<script>
import { spcyMyInfoverifyByYkhQzdmTx, jcylxdjcjuploadMyQm, usergetCurrentUserDeparts, myJbxxUpdateUser, } from '@/api/manage'
import onlineSignature from '../../views/inspectorSystem/personalInfo/onlineSignature.vue'
import compSelector from '@/components/compSelector/compSelector.vue'
export default {
    components:{
        onlineSignature,
        compSelector,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            confirmLoading:false,
            verifyByYkhQzdmTxData:{},
            signLinkKey:null,
            currentRow:{},
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(){
            //console.log('头像是否存在',window.localStorage.getItem('verifyByYkhQzdmTxVisible'))
            if(window.localStorage.getItem('verifyByYkhQzdmTxVisible') == 0){//标识是从登录进来
                this.getVerifyByYkhQzdmTxData()
                
            }
        },
        async getVerifyByYkhQzdmTxData(){
            let res = await usergetCurrentUserDeparts()
            //console.log('查询部门',res)
            let orgName = ''
            if(res.code == 200){
            await res.result.list.forEach((item,index)=>{
                if(item.orgCode == res.result.orgCode){
                orgName = item.orgName
                }
            })
            }
            if(orgName == '审评员'){
            await spcyMyInfoverifyByYkhQzdmTx().then(res1=>{//验证登录用户-银行卡-电子签名-头像是否存在
                // 0：表示有值；1：表示为空要完善，yhkFlag 银行卡，phoneFlag 手机号，emailFlag 邮箱，userSignFlag 签名，userPhotoFlag 头像
                if(res1.code == 200){
                //console.log('//验证登录用户-银行卡-电子签名-头像是否存在',res1.result)
                let data = res1.result
                this.verifyByYkhQzdmTxData = {
                    yhkFlag:data.yhkFlag == 1?true:false,
                    fkfhFlag:data.fkfhFlag == 1?true:false,
                    fkhhszdFlag:data.fkhhszdFlag == 1?true:false,
                    phoneFlag:data.phoneFlag == 1?true:false,
                    emailFlag:data.emailFlag == 1?true:false,
                    userSignFlag:data.userSignFlag == 1?true:false,
                    userPhotoFlag:data.userPhotoFlag == 1?true:false,
                    signLink:data.signLink,
                    photoLink:data.photoLink,
                    id:data.id,
                }
                if(data.yhkFlag == 1 || data.userSignFlag == 1){
                    this.visible = true
                }
                
                }
            })
            }
            
        },
        //签名
      signBeforeUpload(){
          return false;
      },
      signHandleChange({file}){
          let that = this
          //console.log(file)
          if(!(file.name.indexOf('.png') !== -1 || file.name.indexOf('.jpg') !== -1 || file.name.indexOf('.jpeg') !== -1) || file.name.indexOf('.JPG') !== -1){
              this.$message.warning('请上传图片（.png、.jpg、JPG和.jpeg）')
              return false
          }
          const fileData = new FormData();
          fileData.append("file",file);
          //console.log('签名',fileData)
          jcylxdjcjuploadMyQm(fileData).then(res=>{
              if(res.code !== 200){
                  that.$message.warning('请上传图片（.png、.jpg、JPG和.jpeg）或者联系管理员!')
              }else{
                  that.$message.success('上传成功')
              }
              this.signLinkKey = Date.now()
          })
      },
      //在线签名
      onlineSignatureClick(){
        this.$refs.onlineSignatureRef.getData(this.verifyByYkhQzdmTxData.id)
        this.$refs.onlineSignatureRef.visible = true
      },
      getSignPhotoLink(){
        this.signLinkKey = Date.now()
      },
      handleOk(){
        
        var that = this
        that.$confirm({
          title: '您确定要保存吗?',
          content: '',
          okText: '确定',
          cancelText: '取消',
          onOk() {
            that.confirmLoading = true
            if(that.currentRow.fyhkh || that.currentRow.fkfh || that.currentRow.fkhhszd){
                myJbxxUpdateUser({
                    fyhkh:that.currentRow.fyhkh,
                    fkfh:that.currentRow.fkfh,
                    fkhhszd:that.currentRow.fkhhszd,
                }).then(res => {
                    if(res.code == 200){
                        that.$message.success(res.message)
                        that.handleCancel()
                    } else {
                        that.$message.warning(res.message)
                    }
                    that.confirmLoading = false
                })
            }else{
                that.handleCancel()
                that.confirmLoading = false
            }
            
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      },
      handleCancel(){
        this.visible = false
        window.localStorage.setItem('verifyByYkhQzdmTxVisible','1')
      },

    }
}
</script>
<style lang="less">
.verifyByYkhQzdmTx-modal-box{
  .ant-form-item{
        // display: flex;
        // align-items: center;
        .ant-form-item-label{
            font-weight: 600;
            width: 118px;
            font-family:simHei;
            background: #e6f7ff;
            height: 40.79px;
            label{
              font-size: 17px !important;
            }
        }
        .ant-form-item-control-wrapper{
            vertical-align: middle;
        }
    }
  .form-model-big-box{
    .form-item-flex-1{
        display: flex;
        .ant-form-item-control-wrapper{
            flex: 1;
            
        }
    }
    .ant-form-item-control-wrapper{
        font-family:仿宋_GB2312 !important;
        
        .ant-checkbox-group{
            height: 40px;
            line-height: 40px;
        }
    }
  }
  .form-model-big-box1{
    .ant-form-item-label{
        
        margin: 4px 3px;
        label{
            padding-left: 3px;
            
        }
        
    }
  }
}
</style>